import React from 'react'
import { Spring } from 'react-spring/renderprops'

class News extends React.Component {
  state = {
    isShow: false,
  }
  handleClick() {
    this.setState({
      isShow: !this.state.isShow,
    })
  }
  render() {
    const { isShow } = this.state
    return (
      <div className="news">
        <button onClick={this.handleClick.bind(this)}>切换</button>

        <Spring from={{ opacity: 0 }} to={{ opacity: isShow ? 1 : 0 }}>
          {(props) => {
            // 如果透明度为 0了, 那么这个盒子就不渲染了
            if (props.opacity === 0) return null
            return <h3 style={props}>我是h3元素</h3>
          }}
        </Spring>
      </div>
    )
  }
}

// class News extends React.Component {
//   render() {
//     return (
//       <div className="news">
//         {/* from 默认的css样式, to 需要变化到的样式 */}
//         <Spring
//           from={{ opacity: 0, transform: 'translateY(0px)' }}
//           to={{ opacity: 1, transform: 'translateY(100px)' }}
//           config={{ duration: 500 }}
//         >
//           {(props) => {
//             return <h3 style={props}>我是News组件</h3>
//           }}
//         </Spring>
//       </div>
//     )
//   }
// }

export default News
